<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Marvin</title>
<style>
body {
    margin: 0;
    padding: 0;
    overflow: hidden;
}
.main {
    height: 100vh;
    transition: all .6s;
}
.main section {
    height: 100vh;
}
.main section:nth-of-type(1) {
    background: red;
}
.main section:nth-of-type(2) {
    background: green;
}
.main section:nth-of-type(3) {
    background: greenyellow;
}
.main section:nth-of-type(4) {
    background: rosybrown;
}
.main section:nth-of-type(5) {
    background: rgb(123, 32, 32);
}
.right-dot {
    position: fixed;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
}
.right-dot::after {
    content: '';
    border-right: 1px dashed #8c7576;
    position: absolute;
    top: 0;
    right: 6px;
    height: 100%;
}
.right-dot span {
    width: 14px;
    height: 14px;
    display: block;
    margin: 20px 0;
    border-radius: 50%;
    background: #fff;
    cursor: pointer;
    border: 4px solid #05b0ff;
    box-sizing: border-box;
    position: relative;
    z-index: 99;
}
.right-dot span:first-child {
    margin-top: 0;
}
.right-dot span:last-child {
    margin-bottom: 0;
}
.right-dot span.active {
    animation: dot 1.5s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;
}

@keyframes dot {
    0% {
        ox-shadow: 0 0 0 0 rgba(37, 143, 184, 1);
        -o-box-shadow: 0 0 0 0 rgba(37, 143, 184, 1);
        -webkit-box-shadow: 0 0 0 0 rgba(37, 143, 184, 1);
        -ms-box-shadow: 0 0 0 0 rgba(37, 143, 184, 1);
        -moz-box-shadow: 0 0 0 0 rgba(37, 143, 184, 1);
        background: rgba(255, 255, 255, 0.7);
    }
    100% {
        box-shadow: 0 0 0 10px rgba(37, 143, 184, 0);
        -o-box-shadow: 0 0 0 10px rgba(37, 143, 184, 0);
        -webkit-box-shadow: 0 0 0 10px rgba(37, 143, 184, 0);
        -moz-box-shadow: 0 0 0 10px rgba(37, 143, 184, 0);
        -ms-box-shadow: 0 0 0 10px rgba(37, 143, 184, 0);
        background: rgba(255, 255, 255, 1);
    }
}
</style>
</head>
<body>
    <section class="main">
        <section>1</section>
        <section>2</section>
        <section>3</section>
        <section>4</section>
        <section>5</section>
    </section>

    <div class="right-dot">
        <span class="active"></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
    </div>

    <script>
        const main = document.querySelector('.main')
        const right_dot = document.querySelectorAll('.right-dot span');

        for (let i = 0; i < right_dot.length; i++) {
            right_dot[i].addEventListener('click', function() {
                this.parentElement.children.className = ''
                this.classList.add('active')
                main.setAttribute('data-index', i)
                main.style.transform = `translateY(-${i}00%)`
            })
        }

        // 滚轮滚动事件
        let timer = null;
        addEvent(window)(document, "mousewheel", function(event) {
            if (timer) {
                return
            }
            if (event.delta > 0.02) {
                transform(false)
            } else if (event.delta < -0.02) {
                transform(true)
            }
        });

        // 页面滚动 & 标识圆点
        function transform(is) {
            const index = main.getAttribute('data-index');
            if (index == 0 || index == 4) {
                return;
            }
            const i = is ? Number(index) + 1 : Number(index) - 1;

            main.setAttribute('data-index', i)
            main.style.transform = `translateY(-${i}00%)`

            timer = setTimeout(() => {
                clearTimeout(timer)
                timer = null;
            }, 2000)
        }

        function addEvent(window, undefined) {
            var _eventCompat = function(event) {
                var type = event.type;
                if (type == 'DOMMouseScroll' || type == 'mousewheel') {
                    event.delta = (event.wheelDelta) ? event.wheelDelta / 120 : -(event.detail || 0) / 3;
                }
                //alert(event.delta);
                if (event.srcElement && !event.target) {
                    event.target = event.srcElement;
                }
                if (!event.preventDefault && event.returnValue !== undefined) {
                    event.preventDefault = function() {
                        event.returnValue = false;
                    };
                }
                /*
                ......其他一些兼容性处理 */
                return event;
            };
            if (window.addEventListener) {
                return function(el, type, fn, capture) {
                    if (type === "mousewheel" && document.mozFullScreen !== undefined) {
                        type = "DOMMouseScroll";
                    }
                    el.addEventListener(type, function(event) {
                        fn.call(this, _eventCompat(event));
                    }, capture || false);
                }
            } else if (window.attachEvent) {
                return function(el, type, fn, capture) {
                    el.attachEvent("on" + type, function(event) {
                        event = event || window.event;
                        fn.call(el, _eventCompat(event));
                    });
                }
            }
            return function() {};
        }

    </script>
</body>
</html>
